/*
 * @description:
 * @author: 孙佳星
 * @lastEditors: 孙佳星
 * @Date: 2023-04-11 17:40:03
 * @LastEditTime: 2023-05-16 13:31:02
 */
import { umi, useRouter } from '@ydc/workbench-tools';
import { Divider, Space } from 'antd';
import React, { CSSProperties } from 'react';
import { PFootLayout } from '@/components/hrLayout/boxLayout';
import './index.less';

export interface NavProps {
  /* 面包屑style */
  title?: JSX.Element | string;
  breadStyle?: CSSProperties;
  onBack?: () => void;

  /* 内容区域 */
  className?: string; // 内容区域className
  style?: CSSProperties; // 内容区域style
  children: React.ReactNode; // 内容区域content

  /* footer操作区 */
  footerClassName?: string; // footer操作区className
  footerstyle?: CSSProperties; // footer操作区style
  renderFooter?: JSX.Element | JSX.Element[];

  mainContentStyle?: CSSProperties;
  layoutcls?: string;
}

export interface BreadItem {
  href?: string | (() => void);
  label: string;
}

export default (props: NavProps) => {
  const { title, breadStyle, onBack, className, style, children, renderFooter, mainContentStyle, layoutcls } = props;
  const router = useRouter();

  const { useLocation } = umi;
  const location: any = useLocation();
  const footer_keep = location.query.footer_keep || true;

  return (
    <div className={`layout-main ${layoutcls || ''}`}>
      {title ? (
        <div className="layout-main-bread" style={breadStyle}>
          <Space size={16}>
            <span onClick={() => (onBack ? onBack() : router.go(-1))} style={{ cursor: 'pointer' }}>
              <iconpark-icon name="fanhui-3i365ld5" s style={{ verticalAlign: 'middle', marginTop: -2 }} />
              <span style={{ marginLeft: 12 }}>返回</span>
            </span>
            <Divider type="vertical" style={{ margin: 0, borderLeftColor: '#4D596C' }} />
            {title}
          </Space>
        </div>
      ) : (
        <></>
      )}

      <div className="layout-main-content" style={mainContentStyle}>
        <div className={`main ${className} ${title ? 'hasTitleMain' : ''}`} style={style}>
          {children}
        </div>

        {!renderFooter && !footer_keep ? (
          <div className="ydc-app-layout-footer">
            <div className="ydc-copyright">Powered by YundongCloud</div>
          </div>
        ) : (
          <></>
        )}
      </div>

      {renderFooter ? <PFootLayout btns={renderFooter} /> : <></>}
    </div>
  );
};
